<template>
    <div class="main">
        <PageHeader></PageHeader>

        <div class="body">
            <div class="container">
                <form class="user-form">
                    <h3 class="title">用户登录</h3>
                    <div class="field">
                        <label for="">用户名</label>
                        <input type="text" />
                    </div>

                    <div class="field">
                        <label for="">密码</label>
                        <input type="text" />
                    </div>

                    <div class="action">
                        <button type="button" @click="login">登录</button>
                    </div>
                </form>
            </div>
        </div>

        <PageFooter></PageFooter>
    </div>
</template>

<script>
import PageHeader from "@/components/commons/header";
import PageFooter from "@/components/commons/footer";
export default {
    props: [],
    components: { PageHeader, PageFooter },
    methods: {
        login() {
            localStorage.setItem("token", "123456");
            this.$router.push("/");
        },
    },
    data() {
        return {};
    },
};
</script>

<style lang="less" scoped>
.user-form{
    width: 360px;
    margin: 150px auto;
    .title{
        font-size: 22px;
        text-align: center;

    }

    .field{
        margin: 15px 0;

        label{
            font-size: 17px;
            display: inline-block;
            width: 60px;
            text-align: right;
            margin-right: 5px;
        }

        input{
            height: 30px;
            width: 280px;
            padding: 0 10px;
            box-sizing: border-box;

        }
    }
    
    .action{
        margin: 25px 0;
        text-align: center;

        button{
            height: 30px;
            padding: 0 15px;
            letter-spacing: 2px;
            box-sizing: border-box;
        }

    }
}
</style>